<template>
  <div class="top">
    <el-row>
      <el-col :span="6">
        <div class="left">
          <div class="lbtn" @click="goHome">首页</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="center">
          <div class="title">一路向东可视化大数据平台</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="right">
          <div class="rbtn">统计报告</div>
          <div class="time">当前时间: {{ date }} {{ time }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
const $router = useRouter()

// 跳首页
const goHome = () => {
  $router.push('/home')
}

const date = ref('0')
const time = ref('0')

// 定时器
const timer = ref(0)

const week = reactive([
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
])

const zeroPadding = (num: number, digit: number) => {
  var zero = ''
  for (var i = 0; i < digit; i++) {
    zero += '0'
  }
  return (zero + num).slice(-digit)
}

const updateTime = () => {
  const cd = new Date()
  time.value =
    zeroPadding(cd.getHours(), 2) +
    ':' +
    zeroPadding(cd.getMinutes(), 2) +
    ':' +
    zeroPadding(cd.getSeconds(), 2)
  date.value =
    zeroPadding(cd.getFullYear(), 4) +
    '-' +
    zeroPadding(cd.getMonth() + 1, 2) +
    '-' +
    zeroPadding(cd.getDate(), 2) +
    ' ' +
    week[cd.getDay()]
}

// setInterval(updateTime, 1000)
// updateTime()

// 开启定时器
onMounted(() => {
  timer.value = setInterval(() => {
    updateTime()
  }, 1000)
})

// 销毁之前 清除定时器
onBeforeMount(() => {
  clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 40px;
  .el-row {
    .el-col {
      .left {
        width: 100%;
        height: 40px;
        background: url('../../images/dataScreen-header-left-bg.png') no-repeat;
        background-size: cover;
        .lbtn {
          width: 150px;
          height: 40px;
          float: right;
          background: url('../../images/dataScreen-header-btn-bg-l.png')
            no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 40px;
          color: #29fcff;
          font-size: 20px;
        }
      }
      .center {
        .title {
          width: 100%;
          height: 74px;
          background: url('../../images/dataScreen-header-center-bg.png')
            no-repeat;
          background-size: cover;
          text-align: center;
          line-height: 74px;
          color: #29fcff;
          font-size: 30px;
        }
      }
      .right {
        width: 100%;
        height: 40px;
        background: url('../../images/dataScreen-header-right-bg.png') no-repeat;
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .rbtn {
          width: 150px;
          height: 40px;
          background: url('../../images/dataScreen-header-btn-bg-r.png')
            no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 40px;
          color: #29fcff;
          font-size: 20px;
        }
        .time {
          color: #29fcff;
          // font-size: 18px;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
